import { Fragment, PropType, defineComponent, ref } from "vue";
import parseTime from "../../../utils/parseTime";
interface QueryFields {
  prop?: string;
  title?: string;
  slot?: (params) => JSX.Element;
}

interface TimelineFields {
  timelineFields: string[];
}

export default defineComponent({
  name: "TimelineContainer",
  props: {
    initialParams: {
      type: Object,
      default: () => ({}),
    },
    queryApi: {
      type: Function,
      required: true,
    },
    queryFields: {
      type: Array as PropType<QueryFields[]>,
      default: () => [],
    },
    timelineFields: {
      type: Array as PropType<TimelineFields["timelineFields"]>,
      default: () => [],
    },
    hasTimeline: {
      type: Boolean,
      default: true,
    },
  },
  emits: ["resetQuery"],
  setup(props, { emit, expose }) {
    const params = ref(Object.assign({}, props.initialParams));
    const loading = ref(false);
    const data = ref([]);
    const total = ref(0);
    function handleQuery() {
      getList();
    }
    function handleReset() {
      params.value = Object.assign({}, props.initialParams);
      getList();
      emit("resetQuery");
    }
    async function getList() {
      loading.value = true;
      try {
        const res = await props.queryApi(params.value);
        data.value = res.data ? res.data.list : [];
        total.value = res.data.total;
      } finally {
        loading.value = false;
      }
    }

    getList();

    expose({
      getList,
    });

    const QueryArea = () => (
      <el-row gutter={12} class="mb-2">
        {props.queryFields.map((item) => (
          <el-col span={6} class="mb-2">
            {item.slot ? (
              item.slot(params)
            ) : (
              <el-input
                v-model={params.value[item.prop]}
                placeholder={item.title}
              />
            )}
          </el-col>
        ))}
        <el-col span={6}>
          <el-button type="primary" onClick={handleQuery}>
            查询
          </el-button>
          <el-button type="info" onClick={handleReset}>
            重置
          </el-button>
        </el-col>
      </el-row>
    );

    const TimelineArea = () => (
      <el-timeline>
        {data.value.map((item) => {
          return (
            <el-timeline-item
              timestamp={parseTime(item[props.timelineFields[0]])}
              placement="top"
            >
              <p>
                <span class=" text-blue-400">
                  {item[props.timelineFields[1]]}&nbsp;&nbsp;
                </span>
                {item[props.timelineFields[2]]}
              </p>
            </el-timeline-item>
          );
        })}
      </el-timeline>
    );
    const PaginationArea = () => (
      <div>
        <el-pagination
          v-model:current-page={params.value.page}
          v-model:page-size={params.value.limit}
          page-sizes={[10, 20, 50, 100]}
          layout="total, sizes, prev, pager, next, jumper"
          total={total.value}
          class="justify-end"
          onSize-change={handleQuery}
          onCurrent-change={handleQuery}
        />
      </div>
    );

    return () => (
      <Fragment>
        <QueryArea />
        <TimelineArea />
        <PaginationArea />
      </Fragment>
    );
  },
});
